<template>
  <div class="container">
    <div class="row">
      <div class="col-12 pt-3">
        <table class="table table-bordered" border="1">
          <thead>
            <tr>
              <th scope="col">编号</th>
              <th scope="col">科目</th>
              <th scope="col">成绩</th>
              <th scope="col">考试时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody @click="onClick($event)">
            <tr :key="index" v-for="(item, index) in list">
              <th scope="row">{{ index + 1 }}</th>
              <td>{{ item.subject }}</td>
              <td>{{ item.score }}</td>
              <td>{{ item.time }}</td>
              <td>
                <button type="button" class="btn btn-link" :data-id="index">
                  删除
                </button>
              </td>
            </tr>
            <!-- <tr>
              <th scope="row">2</th>
              <td>数学</td>
              <td>59</td>
              <td>Sun Sep 01 2013 08:00:00 GMT+0800 (China Standard Time)</td>
              <td>
                <button type="button" class="btn btn-link">删除</button>
              </td>
            </tr> -->
            <tr class="bg-light">
              <th scope="row">统计</th>
              <td colspan="2">
                总分：{{
                  list.reduce((befor, item) => (befor += item.score), 0)
                }}
              </td>
              <td colspan="2">
                平均分：{{
                  list.reduce((befor, item) => (befor += item.score), 0) /
                  list.length
                }}
              </td>
            </tr>
          </tbody>
          <tfoot style="display: none">
            <tr>
              <td class="text-center" colspan="5">暂无数据</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <form class="row align-items-center" @submit.prevent="onSubmit">
      <div class="col-3">
        <input
          type="text"
          class="form-control"
          placeholder="请输入科目"
          v-model.trim="subject"
        />
      </div>

      <div class="col-3">
        <input
          type="text"
          class="form-control"
          placeholder="请输入分数"
          v-model.number="achievement"
        />
      </div>

      <div class="col-3">
        <button type="submit" class="btn btn-primary">添加</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [
        {
          id: 100,
          subject: "语文",
          score: 99,
          time: new Date("2010-08-12"),
        },
        {
          id: 101,
          subject: "数学",
          score: 34,
          time: new Date("2020-09-01"),
        },
        {
          id: 102,
          subject: "英语",
          score: 25,
          time: new Date("2018-11-22"),
        },
        {
          id: 103,
          subject: "体育",
          score: 100,
          time: new Date("2020-12-12"),
        },
      ],
      // 科目
      subject: "",
      // 成绩
      achievement: "",
    };
  },
  methods: {
    onSubmit() {
      console.log(!isNaN(this.achievement));
      if (this.subject == "" || this.achievement == "") {
        alert("不可以为空");
        return;
      } else if (
        isNaN(this.achievement) ||
        this.achievement <= 0 ||
        this.achievement >= 100
      ) {
        alert("成绩请输入正确数字");
        return;
      } else {
        this.list.push({
          id: this.list[this.list.length - 1].id + 1,
          subject: this.subject,
          score: this.achievement,
          time: new Date(),
        });
      }
    },

    onClick(ev) {
      // console.log(ev.target.dataset.id);
      if (ev.target.tagName === "BUTTON") {
        this.list.splice(ev.target.dataset.id, 1);
        console.log("good");
      }
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.table-bordered {
  border-spacing: 0px;
  tbody {
    padding: 10px;
    text-align: center;
  }
}
</style>